<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <table>
        <tbody></tbody>
    </table>
    <script>
        /* 实际开发中,服务器既可以给数组，也可以给对象 */

        //方式二：对象包对象
        const data2 = {
            1178:{
                name: '王平1',
                score: [10, 20, 30, 40, 50]
            },
            1179:{
                
                name: '王平2',
                score: [10, 20, 30, 40, 50]
            },
            1180:{
                
                name: '王平3',
                score: [10, 20, 30, 40, 50]
            },
            1181:{
                name: '王平4',
                score: [10, 20, 30, 40, 50]
            },
            1182:{
                name: '王平5',
                score: [10, 20, 30, 40, 50]
            },
        }

        console.log( Object.keys(data2) )
        document.querySelector('tbody').innerHTML = Object.keys(data2).map(item=>`
        <tr>
            <td>${item}</td>
            <td>${data2[ item ].name}</td>
            <td>${data2[ item ].score[0]}</td>
            <td>${data2[ item ].score[1]}</td>
            <td>${data2[ item ].score[2]}</td>
            <td>${data2[ item ].score[3]}</td>
            <td>${data2[ item ].score[4]}</td>
        </tr>
        `).join('')
        

        //方式一：正常情况,服务器一般返回对象数组（数组包对象）
        // const data1 = [
        //     {
        //         id: 1178,
        //         name: '王平1',
        //         score: [10, 20, 30, 40, 50]
        //     },
        //     {
        //         id: 1179,
        //         name: '王平2',
        //         score: [10, 20, 30, 40, 50]
        //     },
        //     {
        //         id: 1180,
        //         name: '王平3',
        //         score: [10, 20, 30, 40, 50]
        //     },
        //     {
        //         id: 1181,
        //         name: '王平4',
        //         score: [10, 20, 30, 40, 50]
        //     },
        //     {
        //         id: 1182,
        //         name: '王平5',
        //         score: [10, 20, 30, 40, 50]
        //     },
        // ]

        // document.querySelector('tbody').innerHTML = data1.map(item=>`
        // <tr>
        //     <td>${item.id}</td>
        //     <td>${item.name}</td>
        //     <td>${item.score[0]}</td>
        //     <td>${item.score[1]}</td>
        //     <td>${item.score[2]}</td>
        //     <td>${item.score[3]}</td>
        //     <td>${item.score[4]}</td>
        // </tr>
        // `).join('')
    </script>
</body>

</html>